<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .one{
            border: 1px solid orange;
        }
        .two{
            color: green;
        }
        .three{
            color: red;
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="app"><br>
    <form action="adddo" method="post">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入用户名" name="user_name">
        </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="请输入密码" name="user_pwd">
        </div>
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入手机号" v-model="tel" name="user_tel"> <br>
            <span class="two">{{bol1}}</span>
            <span class="three">{{bol2}}</span>
        </div>
        <button type="submit" class="btn btn-primary">注册</button>
    </form>
    <br>
    <button class="one" @click="fun_1()">验证手机号</button>
</div>
</body>
</html>
<script>
    var vue = new Vue({
    el:"#app",
    data:{
        tel:"",
        bol1:"",
        bol2:"",
    },
    methods:{
        fun_1:function(){
            _this = this,
            axios.get('http://www.zxp.com/index.php/tel?tel='+_this.tel)
                    .then(function (response) {
                        console.log(response);
                        boll = response.data;
                        if(this.boll){
                            _this.bol1 = "手机号验证成功 √";
                            _this.bol2 = "";
                        }else{
                            _this.bol1 = "";
                            _this.bol2 = "手机号验证失败 ×";
                        }
                    })
        }
    }
    })
</script>